<template>
	<view>
		<view style="width:60%;margin:auto">
			<fui-segmented-control color="#FFDD00" activeColor="#000" :values="values"></fui-segmented-control>
		</view>
		<view>
			<fui-tabs :tabs="pageTabs" :short="false" size="24" selectedSize="26" isSlider scroll alignLeft
				selectedColor="#000" sliderBackground="#FFDD00" @change="changePages"></fui-tabs>
		</view>
		<view style="padding:50rpx;">
			<view v-if="showCharmList">
				<view v-for="(item,key) of charmList" class="rankingList">
					<view class="rankIndex">No.{{key+1}}</view>
					<view class="rankHead">{{item.rankHead}}</view>
					<view class="rankName">{{item.rankName}}</view>
					<view class="rankCount">
						<view>累计收到玫瑰</view>
						<view class="Count">{{item.rankCount}}</view>
						<view>朵</view>
					</view>
				</view>
			</view>
			<view v-if="showMemberList">
				<view v-for="(item,key) of memberList" class="rankingList">
					<view class="rankIndex">No.{{key+1}}</view>
					<view class="rankHead">{{item.rankHead}}</view>
					<view class="rankName">{{item.rankName}}</view>
					<view class="rankCount">
						<view>累计送出玫瑰</view>
						<view class="Count">{{item.rankCount}}</view>
						<view>朵</view>
					</view>
				</view>
			</view>
			<view v-if="showNoticeList">
				<view v-for="(item,key) of noticeList" class="rankingList">
					<view class="rankIndex">No.{{key+1}}</view>
					<view class="rankHead">{{item.rankHead}}</view>
					<view class="rankName">{{item.rankName}}</view>
					<view class="rankCount">
						<view>累计发布通告</view>
						<view class="Count">{{item.rankCount}}</view>
						<view>条</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				values: [
					'全国', '同城'
				],
				pageTabs: [{
						name: '魅力榜'
					},
					{
						name: '会员榜'
					},
					{
						name: '通告榜'
					}
				],
				showCharmList: true,
				charmList: [{
						rankHead: '',
						rankName: '张三',
						rankCount: 1234
					},
					{
						rankHead: '',
						rankName: '李四',
						rankCount: 894
					},
					{
						rankHead: '',
						rankName: '王五',
						rankCount: 794
					},
					{
						rankHead: '',
						rankName: '赵六',
						rankCount: 678
					}
				],
				showMemberList: false,
				memberList: [{
						rankHead: '',
						rankName: '张三',
						rankCount: 1234
					},
					{
						rankHead: '',
						rankName: '李四',
						rankCount: 894
					},
					{
						rankHead: '',
						rankName: '王五',
						rankCount: 794
					},
					{
						rankHead: '',
						rankName: '赵六',
						rankCount: 678
					}
				],
				showNoticeList: false,
				noticeList: [{
						rankHead: '',
						rankName: '张三',
						rankCount: 1234
					},
					{
						rankHead: '',
						rankName: '李四',
						rankCount: 894
					},
					{
						rankHead: '',
						rankName: '王五',
						rankCount: 794
					},
					{
						rankHead: '',
						rankName: '赵六',
						rankCount: 678
					}
				]
			};
		},
		methods: {
			changePages(e) {
				if (e.index == 0) {
					this.showCharmList = true;
					this.showMemberList = false;
					this.showNoticeList = false;
				} else if (e.index == 1) {
					this.showCharmList = false;
					this.showMemberList = true;
					this.showNoticeList = false;
				} else {
					this.showCharmList = false;
					this.showMemberList = false;
					this.showNoticeList = true;
				}
			}
		}
	}
</script>

<style lang="scss">
	.rankingList {
		height: 50rpx;
		padding: 30rpx;
		line-height: 50rpx;
		border-bottom: 1rpx solid #CCC
	}

	.rankIndex {
		float: left;
		width: 100rpx;
		font-size: 36rpx;
		font-weight: bold
	}

	.rankHead {
		float: left;
		width: 50rpx;
		height: 50rpx;
		background-color: #CCC;
		border-radius: 50rpx;
	}

	.rankName {
		float: left;
		margin-left: 30rpx;
		font-size: 30rpx;
		color: #999;
	}

	.rankCount {
		float: left;
		margin-left: 30rpx;
		width: 300rpx;
	}

	.rankCount view {
		float: left;
	}

	.rankCount .Count {
		color: #FF6600
	}
</style>